<template>
  <basic-table :config="configData"></basic-table>
</template>

<script>
  import {
    EnumTableColumnType
  } from "../BasicList/utils/static"
  import BasicTable from "./index.vue"
  export default {
    components: {
      BasicTable
    },
    data() {
      return {
        configData: {
          form: { // 编辑的数据存储
            selectionRows: [] // 存放选中项
          },
          data: [{ // 表格数据
              name: "测试1",
              age: 20
            },
            {
              name: "测试2",
              age: 21
            }
          ],
          border: true, // false 不显示边框,true 显示边框
          loading: false, // 列表loading，true 显示loading，false不显示loading
          selection: false, // 是否可以选中，true有选中列，false没有选中列
          columns: [{ // 表头设置
              label: "商品组合名称", // 列名称
              width: 150, // 列宽度
              fixed: false, // 列是否固定,true固定在左边, left固定在左边, right固定在右边
              sortable: false, // 是否排序
              sortMethod: () => {}, // 排序方法
              type: EnumTableColumnType.Text, // 表头类型
              columnAlign: "center", // 列的居中方式
              prop: ["name"], // 关联数据属性
              propMethod: (row) => {}, // 关联数据函数（对数据需要加工处理使用这个函数，不需要可以直接使用prop）
              filters: [ // 数据过滤的选项，数组格式，数组中的元素需要有 text 和 value 属性。
                {
                  text: "分类1",
                  value: 1
                },
                {
                  text: "分类2",
                  value: 2
                }

              ],
              filterMultiple: true,
              filterPlacement: "", // 过滤弹出框的定位
              filterMethod: () => {} // 帅选函数
            },
            { // 表头设置
              label: "商品组合名称", // 列名称
              width: 150, // 列宽度
              fixed: false, // 列是否固定,true固定在左边, left固定在左边, right固定在右边
              sortable: false, // 是否排序
              sortMethod: () => {}, // 排序方法
              type: EnumTableColumnType.Image, // 表头类型
              imageWidth: "100px", // 图片宽度
              imageHeight: "56px", // 图片高度
              prop: ["name"], // 关联数据属性
              filters: [ // 数据过滤的选项，数组格式，数组中的元素需要有 text 和 value 属性。
                {
                  text: "分类1",
                  value: 1
                },
                {
                  text: "分类2",
                  value: 2
                }

              ],
              filterMultiple: true,
              filterPlacement: "", // 过滤弹出框的定位
              filterMethod: () => {} // 帅选函数
            },
            {
              label: "操作",
              type: EnumTableColumnType.Operation,
              operations: [{
                  btnType: "primary",
                  content: "编辑",
                  triggerFunc: this.onEditTableColumn
                },
                {
                  btnType: "danger",
                  content: "删除",
                  triggerFunc: this.onDeleteTableColumn
                }
              ]
            }
          ]
        }
      }
    }
  }

</script>
